<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div>
    <div id="right" style="width: 1200px; float: top;margin: auto">
        <%--查询框--%>
        <%--查询条件--%>
        <form class="layui-form" action="">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <%--查询条件结束--%>
        <%--存放一个table--%>
        <table class="layui-hide" id="test2" lay-filter = "test2"></table>
    </div>
    <div style="width: 1200px;margin: auto">
        <div id="left" style="width: 1200px;height:200px;margin: auto">
            <table class="layui-hide" id="test" lay-filter = "test"></table>
        </div>
    </div>
</div>
<%--存放一个table--%>
<script src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
<script type="text/javascript">

        layui.use(['table','layer','form','jquery'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var namestatus=true;

            var colordata=[];
            var countdata=[];
            var cicledata=[];

            table.render({
                // element  元素
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/tMhtRecord/statistics1' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
                //,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    //{type: 'checkbox', fixed: 'left'}
                    {type:'numbers',title:'编号'}
                    ,{field:'charact', title: '心理健康特点', sort: true}
                    ,{field:'count', title: '异常数量', sort: true}
                    ,{field:'sum', title: '总体数量', sort: true}
                    ,{field:'percent', title: '异常占比', sort: true}
                ]],
                done: function(res, curr, count){
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    res.data.forEach(function (item){
                        colordata.push(item.classifyAll);
                        countdata.push(item.count);
                        var obj={};
                        obj["value"]=item.count;
                        obj["name"]=item.classifyAll;
                        cicledata.push(obj);
                    })
                    // 数据渲染完之后开始显示echart的图
                    // getEchartsPic1();
                    // getEchartsPic2();
                }
            });
            table.render({
                // element  元素
                elem: '#test2'
                ,page:true
                // ,method:"POST"
                ,limit:5
                ,limits:[5,10,15]
                ,toolbar: '#toolbarDemo'
                ,url:'${pageContext.request.contextPath}/tMhtRecord/statistics2' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    // {type: 'checkbox', fixed: 'left'}
                    {type:'numbers',title:'编号'}
                    // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                    ,{field:'username', title: '用户名', sort: true}
                    ,{field:'tel', title: '电话', sort: true}
                    ,{field:'createtime', title: '做题时间', sort: true}
                    ,{field:'assessment', title: '效度评估(n>7)', sort: true}
                    ,{field:'study', title: '学习焦虑(n>8)', sort: true}
                    ,{field:'friend', title: '对人焦虑(n>8)', sort: true}
                    ,{field:'lonely', title: '孤独倾向(n>8)', sort: true}
                    ,{field:'guiltily', title: '自责倾向(n>8)', sort: true}
                    ,{field:'allergy', title: '过敏倾向(n>8)', sort: true}
                    ,{field:'body', title: '身体症状(n>8)', sort: true}
                    ,{field:'terror', title: '恐怖倾向(n>8)', sort: true}
                    ,{field:'impulsion', title: '冲动倾向(n>8)', sort: true}
                    ,{field:'classify', title: '全量表总分(n>65)', sort: true}
                ]]
            });

            // 查询
            form.on('submit(formDemo)', function(data){
                table.reload('test2', {
                    where: data.field,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        })


</script>
</body>


</html>
